<template>

    <el-row>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="账号" prop="username">
                <el-input v-model="queryParams.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>

            </el-form-item>
        </el-form>
    </el-row>

    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" size="small">新增</el-button>
        </el-col>

    </el-row>

    <el-row>

        <el-table :data="tableData">

            <el-table-column prop="userid" label="userid" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="nickname" label="昵称" />

        </el-table>


    </el-row>




</template>

<script setup name="User">
import { onMounted } from 'vue'
import axios from 'axios'
import { ref } from 'vue'

const tableData = ref([])


const queryParams = ref({
    username: ''
})

function queryUserList() {
    axios.get('http://localhost:8080/user/list').then(response => {
        // console.log(response.data);


        /**
         * 
         * response.data    --> userService.list()
         * 
         * 
         * response.data    --> Ret{
         *          code
         *          data
         *          msg:
         * 
         * }
   
         */

        if (response.status == 200) {
            const ret = response.data;
            const { code, data, msg } = ret;
            if (code == 200) {
                alert("请求成功")
                tableData.value = data;
            }

        }

    })
}



//加载当前页面完成之后 查询
onMounted(() => {
    queryUserList()
})


</script>

<style scoped></style>
